<template>
  <div id="app">
    <div class="divLogin">
      <div class="divContent">

        <div class="divLeft">

          <div class="divTitle">
            <img
              src="http://www-wms-java.itheima.net/img/title.ef005a7a.png"
              alt=""
            />
          </div>

          <div>
            <el-form :model="form">
              <el-form-item>
                <template>
                  <i class="el-icon-mobile"></i>
                </template>
                <el-input
                  v-model="form.username"
                  style="width: 70%; margin-top: 30px"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <template>
                  <i class="el-icon-unlock"></i>
                </template>
                <el-input
                  style="width: 70%; margin-top: 30px"
                  placeholder="请输入密码"
                  v-model="form.password"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item>
                <template>
                  <el-checkbox
                    v-model="form.checked"
                    style="margin-right: 185px"
                    >记住密码</el-checkbox
                  >
                </template>
              </el-form-item>
              <el-form-item>
                <template>
                  <el-button
                    type="warning"
                    style="
                      width: 280px;
                      height: 50px;
                      color: #332939;
                      font-weight: 600;
                      font-size: 16px;
                    "
                    @click="jumpFn"
                    >立即登录</el-button
                  >
                </template>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="divRight"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginA',
  data () {
    return {
      form: {
        username: 'admin',
        password: '111111',
        checked: ''
      }
    }
  },
  methods: {
    jumpFn () {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  height: 100%;
  font-size: 14px;
  .divLogin {
    background-color: #fdfafa;
    .divContent {
      width: 958px;
      height: 516px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border-radius: 40px;
      box-shadow: 0 0 20px rgb(93 93 93 / 33%);
      .divLeft {
        float: left;
        width: 398px;
        height: 516px;
        background-color: #fff;
        border-radius: 34px 0 0 34px;
        margin: 0 auto;
        .divTitle {
          margin-top: 72px;
          img {
            width: 150px;
            height: 64px;
            border-style: none;
          }
        }
      }
      .divRight {
        float: right;
        background-image: url(http://www-wms-java.itheima.net/img/contentBg.1321d126.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        width: 560px;
        height: 516px;
      }
    }
  }
}
</style>
